<template>
  <div id="commonmoney">
    <Header goback="true" :headerTitle="headerTitle"></Header>
    <div class="common-content paddingTop">
      <div class="content-top">
        <div class="content-top-inner">
          <div class="inner-top">
            <span>{{ title }}</span>
            <router-link class="inner-top-shuomin" :to="detailPath">
              <span class="iconfont icon-bangzhu help-icon"></span
              ><span>{{ shuomin }}</span>
            </router-link>
          </div>
          <p class="inner-center-num">
            <span>{{ currentNum }}</span
            >{{ dw }}
          </p>
          <button class="inner-bottom-sub">{{ subText }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/header/header";
export default {
  data() {
    return {};
  },
  props: [
    "headerTitle",
    "title",
    "shuomin",
    "currentNum",
    "dw",
    "subText",
    "detailPath",
  ],
  components: { Header },
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";
#commonmoney {
  @include wh(100%, 100%);
}

.content-top {
  padding: 0.3rem;
  background: $blue;
}
//顶部积分数量展示 说明入口 功能入口
.content-top-inner {
  background: white;
  padding: 0.4rem;
  border-radius: 0.25rem;
  //当前积分行设置
  .inner-top {
    @include fj;
    margin-top: 0.2rem;
    align-items: center;
    span {
      @include sc(0.6rem, #666666);
    }
    .inner-top-shuomin {
      display: flex;
      align-items: center;
      //帮助图标
      .help-icon {
        padding-right: 0.2rem;
      }
      span {
        color: $blue;
      }
    }
  }
  //积分数量
  .inner-center-num {
    margin-top: 0.2rem;
    @include sc(0.6rem, #666666);

    span {
      padding-right: 0.4rem;
      @include sc(1.8rem, #000);
    }
  }
  //功能按钮
  .inner-bottom-sub {
    margin-top: 0.8rem;
    @include wh(100%, 1.75rem);
    line-height: 1.75rem;
    @include sc(0.75rem, #fff);
    text-align: center;
    background: $blue;
  }
}
</style>
